<script>
import searchIcon from "../assets/search.svg"
import popupPicker from "@/components/popupPicker/index.vue"
import request from "@/utils/request"
import moreIcon from "../assets/more.svg"

export default {
  name: "searchContent",
  components: { popupPicker },
  data() {
    return {
      searchIcon,
      moreIcon,
      searchForm: {
        activityName: "", // 活动名称
        activityTypeId: "", // 活动分类
        queryType: "All", // 查询类型（全部/已参加/未参加）
        sortType: "", // 排序类型
      },
      activityTypeList: [], //活动分类列表
      //活动状态列表
      activityStatusList: [
        {
          label: "全部",
          value: "All",
        },
        {
          label: "已参与",
          value: "Participated ",
        },
        {
          label: "未参与",
          value: "NotParticipated",
        },
      ],
      sortItemList: [
        {
          label: "默认排序",
          value: "",
        },
        {
          label: "上新优先",
          value: "TimeSort",
        },
        {
          label: "人气优先",
          value: "PeopleSort",
        },
      ],
    }
  },
  created() {
    //获取活动分类列表
    request({
      url: "studyActivity/listActivityType",
      showLoading: true,
      errorHandle: true,
    }).then((data) => {
      this.activityTypeList = [
        {
          activityTypeId: "",
          activityTypeName: "全部",
        },
        ...data,
      ]
    })
  },
  emits: ["search"],
}
</script>

<template>
  <view class="component">
    <!--		搜索框-->
    <view class="search-wrapper">
      <view class="search-container d-flex align-center">
        <image class="icon" :src="searchIcon"></image>
        <input v-model="searchForm.activityName" placeholder="搜索活动" @confirm="() => $emit('search')" />
      </view>
    </view>
    <!--		活动分类-->
    <view class="activity-type-list d-flex">
      <view
        class="item"
        v-for="item in activityTypeList"
        :key="item.activityTypeId"
        :class="{ active: searchForm.activityTypeId === item.activityTypeId }"
        @click="
          () => {
            searchForm.activityTypeId = item.activityTypeId
            $emit('search')
          }
        "
        >{{ item.activityTypeName }}</view
      >
    </view>
    <!--		活动状态（全部/已参加/未参加）、排序-->
    <view class="d-flex align-center">
      <view class="activity-status d-flex">
        <view
          class="item"
          v-for="item in activityStatusList"
          :key="item.value"
          :class="{ active: searchForm.queryType === item.value }"
          @click="
            () => {
              searchForm.queryType = item.value
              $emit('search')
            }
          "
          >{{ item.label }}</view
        >
      </view>

      <!--				排序按钮-->
      <view class="sort-btn d-flex align-center" @click="() => $refs.sortTypeSelector.open()">
        <text v-if="!searchForm.sortType">筛选</text>
        <text v-else>{{ sortItemList.find((item) => item.value === searchForm.sortType).label }}</text>
        <image class="icon" :src="moreIcon"></image>
      </view>
      <popupPicker
        ref="sortTypeSelector"
        v-model="searchForm.sortType"
        :picker-option-list="sortItemList"
        @change="() => $emit('search')"
      ></popupPicker>
    </view>
  </view>
</template>

<style scoped lang="scss">
.component {
  > .search-wrapper {
    padding-bottom: 20rpx;

    > .search-container {
      padding: 20rpx;
      background: var(--background-color);
      font-size: 32rpx;
      border-radius: 43rpx;

      > .icon {
        width: 40rpx;
        height: 40rpx;
        margin-right: 20rpx;
      }

      > input {
        width: 0;
        flex: 1;
      }
    }
  }

  > .activity-type-list {
    padding-bottom: 30rpx;
    font-size: 30rpx;
    overflow-y: auto;

    > .item {
      margin-right: 30rpx;
      position: relative;
      min-width: max-content;

      &.active {
        color: #1684fc;
      }

      &.active::after {
        content: "";
        position: absolute;
        bottom: -10rpx;
        left: 0;
        width: 100%;
        height: 6rpx;
        background: #1684fc;
      }
    }
  }

  .activity-status {
    width: 0;
    flex: 1;
    overflow-y: auto;

    > .item {
      background: var(--background-color);
      border-radius: 10rpx;
      font-size: 30rpx;
      padding: 5rpx 20rpx;
      margin-right: 20rpx;

      &.active {
        background: #1684fc;
        color: white;
      }
    }
  }

  .sort-btn {
    font-size: 30rpx;
    > .icon {
      width: 30rpx;
      height: 30rpx;
      margin-left: 10rpx;
    }
  }
}
</style>
